<template>
  <div class="fresh-detail">
    <div class="detail-top">
      <div class="container">
        <div class="atlas">
          <div class="big-img">
            <img :src="comimgsrc+bigimgsrc" alt="" >
          </div>
          <div class="small-img-box">
            <div class="fxbtn swiper-button-prev" style="left: 0;"></div>
            <div class="mid">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in imgAtlas">
                      <img @click="getimgsrc(item)" :src="comimgsrc+item" alt="">
                    </div>
                </div>
              </div>
            </div>
            <div class="fxbtn swiper-button-next" style="right: 0;"></div>
          </div>
        </div>
        <div class="detail-top-right">
          <div class="name">
            <span>品名</span><p>{{detail.name}}</p>
          </div>
          <p class="ms">{{detail.instructions}}</p>
          <div class="price">
            <img :src="bg1" class="bg">
            <p class="p-left">价格 <span>￥{{detail.price}}/{{detail.unit}}</span> <del>原价{{detail.max_price}}/{{detail.unit}}</del></p>
            <div class="div-right">
              <p class="p1">销量</p>
              <p class="p2">{{detail.sales_volume}}</p>
            </div>
          </div>
          <div class="guige">
            <p class="p1">规格</p>
            <span>{{detail.unit}}</span>
          </div>
          <div class="guige">
            <p class="p1">数量</p>
            <div class="num">
              <div class="btn" @click="subnum()">－</div><input type="text" name="number" disabled="disabled" v-model="number"><div class="btn" @click="addnum()">＋</div>
            </div>
          </div>
          <div class="guige">
            <!-- <p class="p1 p2" v-if="detail.free_shipping==1">包邮</p>
            <p class="p1 p2" v-else>不包邮</p> -->
            <div class="button-box">
              <!-- <div class="button ljgm" v-show="sssid">立即购买</div>
              <div class="button ljgm ljgm-act" v-show="!sssid" @click="gobuy(detail.id,number,detail.price)">立即购买</div> -->
              <div class="button ljgm" v-if="detail.start_time > 0 || ttime < 0" @click="yydj()">立即购买</div>
              <div class="button ljgm ljgm-act" v-else @click="gobuy(detail.id,number,detail.price)">立即购买</div>
              <div class="button jrgwc" style="padding-top: 7px; width:230px;" v-if="detail.start_time>0 ">
                <p style="float:left;margin-top:-7px;margin-left:10px;">距开始：</p>
                <djsstart @ieventstart="ieventstart($event)" v-bind:endtime="{sj:detail.start_time,id:detail.id,stock:detail.stock}"></djsstart>
              </div>
              <div class="button jrgwc" style="padding-top: 7px; width:230px;" v-else>
                <p style="float:left;margin-top:-7px;margin-left:10px;">距结束：</p>
                <djsend @ievent="ievent($event)" v-bind:endtime="{sj:ttime,id:detail.id,stock:detail.stock}"></djsend>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="details-down container">
      <div class="nav-box">
        <div class="nav" :class="actView=='cpjj'?'nav-act':''" @click="toggle('cpjj')"><p>产品简介</p></div>
        <div class="nav" :class="actView=='bzgg'?'nav-act':''" @click="toggle('bzgg')"><p>包装规格</p></div>
        <div class="nav" :class="actView=='ggpl'?'nav-act':''" @click="toggle('ggpl')"><p>顾客评论(99)</p></div>
      </div>
      <div class="changbox">
        <div class="box" :class="actView=='cpjj'?'box-act':''" v-html="detail.description">
          
        </div>
        <div class="box" :class="actView=='bzgg'?'box-act':''">
          这是包装规格
        </div>
        <div class="box" :class="actView=='ggpl'?'box-act':''">
          <div class="comment-box">
            <div class="head"><p>全部（{{comment.count}}）</p></div>
            <div class="list-box">
              <div class="list" v-for="item in comment.row">
                <div class="list-left">
                  <img :src="comimgsrc+item.headimg" alt="">
                  <div class="name">{{item.username}}</div>
                </div>
                <div class="list-right">
                  <div class="rate">
                    <p style="float: left;">评分：</p><el-rate disabled text-color="#ef5a68" :value="item.star" show-text></el-rate>
                  </div>
                  <div class="txt">{{item.content}}</div>
                  <div class="img-list" v-show="item.img.length>1">
                    <div class="img" v-for="i in item.img" v-if="i">
                      <div class="cont"><img :src="comimgsrc+i"></div>
                    </div>
                  </div>
                  <p class="p-time">{{item.create_time}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import cp1 from '@/assets/image/cp1.jpg';
import cp2 from '@/assets/image/cp2.jpg';
import ban1 from '@/assets/image/banner1.jpg';
import ban2 from '@/assets/image/banner2.jpg';
import bg1 from '@/assets/image/bg1.png';
import djs from '@/components/common/djs';
import qs from "qs"
import store from '@/vuex/store'
import djsstart from '@/components/common/djs-start';
import djsend from '@/components/common/djs-end';
    export default {
        data(){
           return {
              bg1,
              number:1,
              actView:'cpjj',
              bigimgsrc:'',
              detail:[],
              comimgsrc:'http://api.mountainfreshes.com',
              imgAtlas:[],
              ttime:0,
              sssid:'',
              comment:{
                total:999,
                list:[
                  {
                    img:cp1,name:'13668342857',
                    rate:3,
                    txt:'很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。',
                    imglist:[
                      {src:cp1,i:1},
                      {src:cp1,i:1},
                      {src:cp1,i:1},
                      {src:cp1,i:1}
                    ],
                    time:'2018-06-01'
                  },
                  {
                    img:cp1,name:'13668342857',
                    rate:5,
                    txt:'很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。很好吃，下次还会买。',
                    imglist:[
                      {src:cp1,i:1},
                      {src:cp1,i:1}
                    ],
                    time:'2018-06-01'
                  },
                  {
                    img:cp1,name:'13668342857',
                    rate:1,
                    txt:'很好吃，下次还会买。',
                    imglist:[
                      
                    ],
                    time:'2018-06-01'
                  }
                ]
              }
           }
        },
        props:{
          
        },
        mounted () {
          var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 10,
            freeMode: true,
            autoplay: 4000,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
          })
        },
        
        created(){
            this.getcpId();
            // this.bigimgsrc = this.imgAtlas[0].img
            // console.log(this.bigimgsrc);

            
        },
        methods: {
          yydj:function(){
              this.$confirm('活动还没有开始, 再等等', '提示', {
                confirmButtonText: '知道了',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                
              }).catch(() => {
                          
              });
          },
          ieventstart(ev){
            this.detail.start_time = ev.did;
            // console.log(ev.did,ev.index)
          },
          ievent(ev){
            // this.sssid = ev.did;
            // this.xsglist[ev.did].time = 0;
           this.sssid = ev.did;
           // console.log(this.sssid)
          },
          // 获取商品评论
          getsppl:function(){
            this.$http.post("/index.php/index/content/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  good_id: this.$route.query.cpid

              }))
              .then(res => {
                this.comment = res.data
                console.log(this.comment)
              })
              .catch(error => {
                alert("网络错误")
              });
          },
          getcpId:function(){
            let cpid = this.$route.query.cpid
            console.log(cpid)
            this.$http.get("/index.php/index/goods/getGoodsInfo?ids="+cpid)
            .then(res => {
              this.detail = res.data
              // this.xsglist = res.data;
              // console.log(this.xsglist)
              console.log(this.detail);
              this.imgAtlas = res.data.atlas
              this.bigimgsrc = res.data.preview
              this.ttime = res.data.deadline
            })
            .catch(error => {
              
            });
          },
          getimgsrc:function(e){
            this.bigimgsrc= e
          },
          subnum:function(){
            if(this.number==1){
              this.number=1
            }else{
              this.number--
            }
          },
          addnum:function(){
            this.number++
          },
          toggle:function(e){
            this.actView=e;
          },
          gobuy:function(id,num,price){
            if(this.$store.state.dlzt==1){
              this.getcpId();
              if(this.detail.stock==0){
                alert('商品已经抢购完了哦~')
              }else if(this.detail.start_time==0){
                alert('活动结束了哦~')
              }else{
                
                this.$http.post("/index.php/user/order/purchase_immediately",qs.stringify({
                // mobile:this.tel,
                // password:this.pwd
                    user_id: this.$store.state.userid,
                    good_id: id,
                    quantity: num,
                    price: price

                }))
                .then(res => {
                  console.log(res.data.row)
                  this.$router.push({ path: '/buysteps',query:{cplist: res.data.row} })
                })
                .catch(error => {
                  alert("网络错误")
                });
              }
            }else{
              this.$confirm('你还没有登录, 不能购买', '提示', {
                confirmButtonText: '去登录',
                cancelButtonText: '先逛逛',
                type: 'warning'
              }).then(() => {
                this.$router.push({ path: '/login' })
              }).catch(() => {
                          
              });
            }
          }
        },
        components:{
          djsend,djsstart
        },
        watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'limitDetail'){
                  this.getcpId();
                  this.number=1;
                }
              }
        }
    }
</script>
<style scoped lang="less">
.fresh-detail{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
}
.detail-top{
  width: 100%;
  height: auto;
  zoom: 1; 
  overflow: hidden;
  border-bottom: 2px dashed #b0b0b0;
  margin-top: 30px;
  .atlas{
    width: 658px;
    height: 642px;
    margin-bottom: 44px;
    float: left;
    .big-img{
      width: 100%;
      height: 470px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .small-img-box{
      width: 100%;
      height: 154px;
      margin-top: 18px;
      position: relative;
      .fxbtn{
        width: 20px;height: 38px;margin-top: -19px;background-size: 100% 100%;
      }
      .mid{
        width: 600px;
        height: 100%;
        margin: auto;
        .swiper-container{
          width: 100%;
          height: 100%;
          overflow: hidden;
          .swiper-slide{
            height: 100%;
            cursor:pointer;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .detail-top-right{
    width: 490px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    float: right;
    margin-bottom: 44px;
    .name{
      width: 100%;
      height: auto;
      zoom: 1;
      overflow: hidden;
      span{
        float: left;
        height: 36px;
        width: 70px;
        background: #50b748;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 36px;
        border-radius: 6px;
      }
      p{
        font-size: 24px;
        color: #131313;
        line-height: 36px;
        float: left;
        margin-left: 20px;
      }
    }
    .ms{
      font-size: 16px;
      color: #131313;
      padding-top: 20px;
    }
    .price{
      width: 100%;
      height: 106px;
      position: relative;
      margin-top: 28px;
      .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0; 
      }
      .p-left{
          float: left;
          margin-left: 16px;
          line-height: 106px;
          font-size: 18px;
          color: #2e2e2e;
          span{
            font-size: 22px;
            color: #50b748;
            padding-left: 4px;
          }
          del{
            font-size: 14px;
            color: #777777;
            padding-left: 4px;
          }
      }
      .div-right{
        width: 132px;
        height: 100%;
        float: right;
        text-align: center;
        border-left: 1px dashed #fff;
        .p1{
          font-size: 16px;
          color: #2c2c2c;
          padding-top: 32px;
        }
        .p2{
          font-size: 14px;
          color: #50b748;
          padding-top: 4px;
        }
      }
    }
    .guige{
      width: 100%;
      margin-top: 20px;
      .p1{
        font-size: 14px;
        color: #2d2d2d;
      }
      .p2{
        color: #50b748;
      }
      span{
        display: block;
        width: 74px;
        height: 28px;
        background: #50b748;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
        color: #fff;
        margin-top: 10px;
      }
      .num{
        width: 110px;
        height: 28px;
        margin-top: 16px;
        .btn{
          float: left;
          width: 28px;
          height: 28px;
          cursor: pointer;
          text-align: center;
          line-height: 26px;
          background: #c2c2c2;
        }
        input{
          display: block;
          width: 54px;
          float: left;
          border: none;
          text-align: center;
          font-size: 14px;
          color: #090909;
          background: #eaeaea;
          height: 26px; 
        }
      }
      .button-box{
        width: 100%;
        height: 46px;
        margin-top: 14px;
        .button{
          width: 184px;
          height: 46px;
          float: left;
          box-sizing: border-box;
          border: 1px solid #50b748;
          border-radius: 8px;
          line-height: 44px;
        }
        .ljgm{
          background: #9e9e9e;
          color: #fff;
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          display: block;
          box-sizing: border-box;
          border: 1px solid #9e9e9e;
        }
        .ljgm-act{
          background: #50b748;
          border-color: #50b748;
        }
        .jrgwc{
          color: #50b748;
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          margin-left: 46px;
        }
      }
    }
  }
}
.details-down{
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin-top: 20px;
  .nav-box{
    width: 100%;
    height: 39px;
    .nav{
      display: block;
      line-height: 38px;
      float: left;
      margin-left: 38px;
      cursor: pointer;
      &:first-child{
        margin-left: 0;
      }
      p{
        padding: 0 12px;
        font-size: 18px;
        color: #858585;
      }
    }
    .nav-act{
      p{
        color: #50b748;
      }
      border-bottom: 1px solid #50b748;
    }
  }
  .changbox{
    width: 100%;
    margin-top: 20px;
    .box{
      width: 100%;
      height: auto;
      overflow: hidden;
      zoom: 1;
      display: none;
    }
    .box-act{
      display: block;
    }
  }
}
.comment-box{
  width: 100%;
  height: auto;
  overflow: hidden;
  zoom: 1;
  box-sizing: border-box;
  border: 1px solid #b2b2b2;
  .head{
    background: #eeeeee;
    height: 68px;
    border-bottom: 1px solid #b2b2b2;
    p{
      font-size: 18px;
      color: #272727;
      line-height: 68px;
      padding-left: 66px;
    }
  }
  .list-box{
    width: 100%;
    height: auto;
    overflow: hidden;
    zoom: 1;
    margin-bottom: 20px;
    .list{
      width: 100%;
      height: auto;
      overflow: hidden;
      zoom: 1;
      border-bottom: 1px dashed #aaaaaa;
      .list-left{
        width: 170px;
        height: auto;
        float: left;
        img{
          display: block;
          width: 114px;
          height: 114px;
          border-radius: 100%;
          margin: 26px auto 6px;
        }
        .name{
          width: 80%;
          height: 30px;
          margin: auto;
          line-height: 30px;
          text-align: center;
          overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
        }
      }
      .list-right{
        width: 980px;
        height: auto;
        zoom: 1;
        overflow: hidden;
        float: left;
        margin-left: 20px;
        .rate{
          margin-top: 40px;
        }
        .txt{
          font-size: 14px;
          color: #272727;
          line-height: 20px;
          margin-top: 18px;
        }
        .img-list{
          width: 100%;
          height: 84px;
          margin-top: 10px;
          .img{
            display: block;
            width: 88px;
            height: 84px;
            float: left;
            margin-right: 20px;
            background: #d6d6d6;
            .cont{
              width: 88px;
              height: 84px;
              text-align: center;
              display: table-cell;
              vertical-align: middle;
              overflow: hidden;
              img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
                display: hidden;
                transform: scale(1);
                transition: all ease 0.2s;
              }
              img.scale {
                transform: scale(1.5);
              }
            }
          }
        }
        .p-time{
          font-size: 14px;
          padding-top: 10px;
          padding-bottom: 14px;
          color: #a8a8a8;
        }
      }
    }
  }
}
</style>
